<template>
	<view class="top">
		<view>当前可用抵扣里程数：387.6公里</view>
		<view @click="goToAllgood(false)">
			<uni-icons type="search" size="20"></uni-icons>
		</view>
	</view>
	<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
		<swiper-item>
			<view class="swiper-item uni-bg-red">
				<image class="banner" :src="imgUrl+'assets/logn.jpg'" style=""></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-green">
				<image class="banner" :src="imgUrl+'assets/logn.jpg'"></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-blue">
				<image class="banner" :src="imgUrl+'assets/logn.jpg'"></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-red">
				<image class="banner" :src="imgUrl+'assets/logn.jpg'" style=""></image>
			</view>
		</swiper-item>
	</swiper>
	<view class="nav1">
		<view>里程兑换</view>
		<view>优选正品</view>
		<view>无忧兑换货</view>
	</view>
	<view class="nav2">
		<view @click="goToAllgood(true)">
			<image src="../../static/logo.png"></image>
			<text>全部商品</text>
		</view>
		<view @click="goToPage(v)" v-for="v in goodClass">
			<image src="../../static/logo.png"></image>
			<text>{{v.fl}}</text>
		</view>
		<view>
			<image src="../../static/logo.png"></image>
			<text>全部分类</text>
		</view>
	</view>
	<view class="nav3">
		<view>人气爆款</view>
		<swiper class="swiper2" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500">
			<swiper-item>
				<view class="swiper-item2 uni-bg-red">
					<view class="goodList">
						<image :src="imgUrl+'assets/logn.jpg'" style=""></image>
						<view class="goodListBan">
							<view>防寒服 冬季防风加厚外套户外加绒内...</view>
							<view>10公里可抵扣100元</view>
							<view>￥550</view>
						</view>
					</view>
					<view class="goodList">
						<image :src="imgUrl+'assets/logn.jpg'" style=""></image>
						<view class="goodListBan">
							<view>防寒服 冬季防风加厚外套户外加绒内...</view>
							<view>10公里可抵扣100元</view>
							<view>￥550</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item2 uni-bg-red">
					<view class="goodList">
						<image :src="imgUrl+'assets/logn.jpg'" style=""></image>
						<view class="goodListBan">
							<view>防寒服 冬季防风加厚外套户外加绒内...</view>
							<view>10公里可抵扣100元</view>
							<view>￥550</view>
						</view>
					</view>
					<view class="goodList">
						<image :src="imgUrl+'assets/logn.jpg'" style=""></image>
						<view class="goodListBan">
							<view>防寒服 冬季防风加厚外套户外加绒内...</view>
							<view>10公里可抵扣100元</view>
							<view>￥550</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item2 uni-bg-red">
					<view class="goodList">
						<image :src="imgUrl+'assets/logn.jpg'" style=""></image>
						<view class="goodListBan">
							<view>防寒服 冬季防风加厚外套户外加绒内...</view>
							<view>10公里可抵扣100元</view>
							<view>￥550</view>
						</view>
					</view>
					<view class="goodList">
						<image :src="imgUrl+'assets/logn.jpg'" style=""></image>
						<view class="goodListBan">
							<view>防寒服 冬季防风加厚外套户外加绒内...</view>
							<view>10公里可抵扣100元</view>
							<view>￥550</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
	
	
</template>

<script>
	import http from '../../until/http'
	import {computed,reactive,toRefs} from 'vue'
	import {mapState} from 'vuex'
	
	export default {
		setup(){
			let data=reactive({
				imgUrl:'http://localhost:8888/getImg?sort=',
				goodClass:[],
				goToPage:(v)=>{
					uni.redirectTo({url:'/pages/allgoods/allgoods?classid='+v.id+'&title='+v.fl})
				},
				goToAllgood:(show)=>{
					uni.redirectTo({url:'/pages/allgoods/allgoods?classid=0&title=全部商品&showSearch='+show})
				}
			})
			return {...toRefs(data)}
		},
		computed:mapState(['a']),
		onLoad() {
			http({
				url:'/goodst/getclass',	
			}).then((res)=>{
				this.goodClass={...res.data.data}
			})
		}
	}
</script>

<style lang="less" scoped>
	.top{
		display: flex;
		justify-content:space-between;
		margin:10rpx 20rpx;
	}
	.swiper{
		height: 320rpx;
	}
	.swiper-item{
		margin:10rpx auto;
		width: 720rpx;
		height: 300rpx;
	}
	.banner{
		width: 100%;
		height: 100%;
	}
	.nav1{
		width: 750rpx;
		height: 60rpx;
		display: flex;
		justify-content:space-around;
		margin: 10rpx 0;
		view{
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}
	.nav2{
		width: 720rpx;
		display: flex;
		justify-content:space-around;
		flex-wrap:wrap;
		margin: 40rpx 15rpx;
		view{
			width: 180rpx;
			text-align: center;
			image{
				margin: auto;
				width: 80rpx;
				height: 80rpx;
			}
			text{
				display: block;
				width: 180rpx;
				text-align: center;
				margin-bottom: 40rpx;
			}
		}
	}
	.nav3{
		margin: 0 20rpx;
	}
	.swiper2{
		height: 580rpx;
	}
	.swiper-item2{
		width: 720rpx;
	}
	.goodList{
		margin: 20rpx 0;
		display: flex;
		background-color: rgb(250,250,250);
		image{
			height: 240rpx;
			width: 300rpx;
		}
	}
	.goodListBan{
		padding: 20rpx;
		width: 400rpx;
		height: 200rpx;
		display: flex;
		flex-direction:column;
		view:nth-child(2),
		view:nth-child(3){
			color: rgb(226,96,31);
			line-height: 60rpx;
		}
		
	}
</style>
